<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mychat_version0.1</title>
    <style>
        /* 全局样式 */
        body {
            font-family: 'Comic Sans MS', cursive, sans-serif;
            background-color: #f8e8ff;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        /* 主容器样式 */
        .chat-container {
            width: 80%;
            max-width: 800px;
            background-color: #ffffff;
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 90vh;
        }

        /* 头部样式 */
        .chat-header {
            background-color: #ff69b4;
            color: white;
            padding: 20px;
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* 设置按钮样式 */
        .settings-btn {
            background: none;
            border: none;
            color: white;
            font-size: 20px;
            cursor: pointer;
        }

        /* 聊天消息区域样式 */
        .chat-messages {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background-image: url('https://i.imgur.com/8Q7yK5T.png');
            background-size: cover;
        }

        /* 单条消息样式 */
        .message {
            display: flex;
            margin-bottom: 15px;
        }

        /* 消息头像样式 */
        .message-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
        }

        /* 消息内容样式 */
        .message-content {
            background-color: rgba(255, 255, 255, 0.8);
            padding: 10px;
            border-radius: 10px;
            max-width: 70%;
        }

        /* 消息发送者昵称样式 */
        .message-sender {
            font-weight: bold;
            color: #ff69b4;
        }

        /* 输入区域样式 */
        .chat-input {
            display: flex;
            padding: 20px;
            border-top: 1px solid #ccc;
        }

        /* 输入框样式 */
        .chat-input input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-right: 10px;
        }

        /* 发送按钮样式 */
        .chat-input button {
            padding: 10px 20px;
            background-color: #ff69b4;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        /* 设置模态框样式 */
        .settings-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }

        /* 设置模态框内容样式 */
        .settings-content {
            background-color: white;
            padding: 30px;
            border-radius: 15px;
            width: 300px;
        }

        /* 设置模态框标题样式 */
        .settings-content h2 {
            margin-top: 0;
            color: #ff69b4;
        }

        /* 设置模态框标签样式 */
        .settings-content label {
            display: block;
            margin-bottom: 5px;
        }

        /* 设置模态框输入框样式 */
        .settings-content input {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        /* 设置模态框按钮样式 */
        .settings-content button {
            padding: 10px 20px;
            background-color: #ff69b4;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <!-- 聊天容器 -->
    <div class="chat-container">
        <!-- 聊天头部 -->
        <div class="chat-header">
            <span>mychat_version0</span>
            <button class="settings-btn" onclick="openSettings()">⚙️</button>
        </div>
        <!-- 聊天消息区域 -->
        <div class="chat-messages" id="chat-messages">
            <!-- 示例消息 -->
            <div class="message">
                <img class="message-avatar"
                    src="https://img0.baidu.com/it/u=562272489,454210522&fm=253&fmt=auto&app=138&f=JPEG?w=806&h=800"
                    alt="Avatar">
                <div class="message-content">
                    <div class="message-sender">我玩原神怎么你了</div>
                    <div>注意事项：<br>
                        第1.该版本只是用于测试,退出之后不保存当前聊天记录和设置的头像和昵称<br>
                        第2.毫无使用体验<br>
                        第3.目前只能用内部账号登录<br>
                        第4.不会提示当前谁在线毕竟都是内部账号登录的<br>
                        第5.人格启动<br>
                        第6.我要玩原神
                    </div>
                </div>
            </div>
        </div>
        <!-- 聊天输入区域 -->
        <div class="chat-input">
            <input type="text" id="message-input" placeholder="输入消息...">
            <button id="send-button" onclick="sendMessage()">发送</button>
        </div>
    </div>

    <!-- 设置模态框 -->
    <div class="settings-modal" id="settings-modal">
        <div class="settings-content">
            <h2>个人设置</h2>
            <label for="nickname">昵称:</label>
            <input type="text" id="nickname" placeholder="输入昵称">
            <label for="avatar">头像链接:</label>
            <input type="text" id="avatar" placeholder="输入头像链接">
            <button onclick="saveSettings()">保存</button>
            <button onclick="closeSettings()">取消</button>
        </div>
    </div>

    <script>
        // 获取相关 DOM 元素
        const chatMessages = document.getElementById('chat-messages');
        const messageInput = document.getElementById('message-input');
        const settingsModal = document.getElementById('settings-modal');
        const socket = new WebSocket('ws://47.109.203.137:8080');
        let nickname = '匿名用户';
        let avatar = 'https://upload-bbs.miyoushe.com/upload/2025/01/03/341965958/9adc2a7e4431f5d0729b7f706e2049a6_2686591563080731174.jpg?x-oss-process=image//resize,s_600/quality,q_80/auto-orient,0/interlace,1/format,jpg';

        // 打开设置模态框函数
        function openSettings() {
            settingsModal.style.display = 'flex';
        }

        // 关闭设置模态框函数
        function closeSettings() {
            settingsModal.style.display = 'none';
        }

        // 保存设置函数
        function saveSettings() {
            const newNickname = document.getElementById('nickname').value;
            const newAvatar = document.getElementById('avatar').value;

            if (newNickname) {
                nickname = newNickname;
            }
            if (newAvatar) {
                avatar = newAvatar;
            }

            closeSettings();
        }

        // 发送消息函数
        function sendMessage() {
            const message = messageInput.value.trim();
            const now = new Date();
            const jsonobj = {
                type: "message",
                info: message,
                sender: nickname,
                avatar: avatar,
                time:now.toLocaleString()
            }
            socket.send(JSON.stringify(jsonobj));
        }

        socket.onmessage = function (event) {
            const message = event.data;
            const json = {
                type: "",
                info: "",
                sender: "",
                avatar: "",
                time:""
            }
            const jsonData = JSON.parse(message);
            json.type = jsonData.type;
            json.info = jsonData.info;
            json.sender = jsonData.sender;
            json.avatar = jsonData.avatar;
            json.time = jsonData.time;
            if (json.type == "message") {

                const messageElement = document.createElement('div');
                messageElement.classList.add('message');

                const avatarElement = document.createElement('img');
                avatarElement.classList.add('message-avatar');
                avatarElement.src = json.avatar;
                avatarElement.alt = 'Avatar';

                const contentElement = document.createElement('div');
                contentElement.classList.add('message-content');

                const senderElement = document.createElement('div');
                senderElement.classList.add('message-sender');
                senderElement.textContent = json.sender+' '+json.time;

                const textElement = document.createElement('div');
                textElement.textContent = json.info;

                contentElement.appendChild(senderElement);
                contentElement.appendChild(textElement);

                messageElement.appendChild(avatarElement);
                messageElement.appendChild(contentElement);

                chatMessages.appendChild(messageElement);
                messageInput.value = '';
                chatMessages.scrollTop = chatMessages.scrollHeight;
            }
        }


    </script>
</body>

</html>